<template>
    <!-- is-vertical  => flex-direction:column -->
    <el-container class="app-layout is-vertical"  style=" border: 1px solid #eee">
        <Head></Head>

        <el-container class="container">
            <Aside></Aside>
            <el-main class="main">
                <Content></Content>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
import Head from "./Layout/Head"
import Aside from "./Layout/Aside"
import Content from "./Layout/Content"
export default {
    name: "HomeView",
    data() {
        return {

        }
    },
    mounted() {
       
    },
    components:{
        Head,
        Aside,
        Content
    }
}
</script>

<style lang="scss" scoped>
.app-layout {
    width: 100%;
    height: 100%;
}

.container{
    align-items: stretch;
}

.asideNav{
    height: 100%;
    background-color: #fff;
    border:solid 1px #e6e6e6;
}

.asideNav .el-menu{
    height: 100%;
    border-right: 0;
}

.main{
    height: 100%;
    overflow-y:auto;
}

.el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
}

.el-aside {
    color: #333;
}
</style>